<template>

	<view style="margin-bottom: 200px;">

		<checkbox-group class="agreement_radio" @change="checkboxChange">
			<view class="item-border row-Color " v-for="(item,index) in cart">
				<!-- 这里是{{item}}和{{index}} -->
				<view class="uni-flex uni-row " style="border-bottom: 1px solid #f1f1f1; padding: 10px 0;">
					<view class="flex-item " style="width: 10%;">
						<view>
							<checkbox-group @click="checkBox($event, item)" class="agreement_radio">
								<view>
									<checkbox checked="true" />
								</view>
							</checkbox-group>
						</view>
					</view>
					<view class="flex-item"
						style="width: 70%;text-align: left;margin-left: 15px; line-height: 18px; font-size: 14px; font-weight: 600;">
						{{ item[0].cabinetName}}
					</view>
				</view>

				<view class="item-border">

					<view class="uni-flex uni-row " v-for="product in item"
						style="padding: 5px 0; box-sizing: border-box;">
						<!-- 	子级{{product}} -->
						<view class="flex-item " style="width: 10%; line-height:50px">
							<view>
								<checkbox :value="product.value" :checked="product.checked"></checkbox>
							</view>
						</view>
						<view class="flex-item" style="width: 15%;">
							<image style="width: 50px; height: 50px;" class="image" :src="product.product.image" />
						</view>
						<view class="flex-item"
							style="width: 50%; text-align: left; font-size: 12px;line-height: 18px; padding: 0px 0 0 4px;">
							<p class="text-overflow">
								<span>{{product.product.brand + "&nbsp;&nbsp;"}}</span>111111
								<span> {{product.product.productName}}</span>
							</p class="text-overflow">
							<p>{{product.product.spec}}</p>
							<p style="font-size: 10px; text-align: right; margin-right: 10px; color: red;">{{  product.product.inventory == 0 ? '暂时缺货' : product.product.number > product.product.inventory ? '目前库存不足, 库存数量为: ' + product.product.inventory : '' }}</p>
						</view>
						<view class="example-body" style="width: 25%; justify-content: center; align-items: center;">
							<view>
								<uni-number-box :value="product.product.number" v-model="product.product.number" />
							</view>
						</view>
					</view>


				</view>

			</view>
		</checkbox-group>

		<view class="item-border row-Color buttom" style="bottom: 40px;">
			<view class="uni-flex uni-row " style="margin: 10px 0;">

				<view class="flex-item" style="width: 70%;">
					<view style="font-size: 20px;">
						<input class="uni-input" name="nickname" placeholder="填写申领描述"
							style="border: 1px solid #ded0d0; padding: 5px;border-radius: 25px;width: 100%;height: 36px;line-height: 36px;font-size: 16px; box-sizing: border-box"
							v-model="desc" />
					</view>
				</view>

				<view class="flex-item" style="display: flex;width: 30%;justify-content: flex-end;">
					<view class="uni-flex">
						<view>
							<button type="primary" plain="true"
								style="margin-right: 3px; height: 36px; line-height: 36px; border-radius: 25px; font-size:16px; background-color: #007aff; color: #fff"
								@click="Submit()">创建申领单</button>
						</view>
					</view>
				</view>

			</view>


		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				cart: [],
				desc: "",
				userEntity: this.StorageCache('user')
			}
		},
		onLoad() {

			this.checkLogin()

			this.Init()
		},
		onNavigationBarButtonTap: function(e) {

			let userSid = this.userEntity.sid,
				list = [];

			for (let i = 0; i < this.cart.length; i++) {
				if (this.cart[i].length > 0) {
					for (let a = 0; a < this.cart[i].length; a++) {

						if (this.cart[i][a].checked) {
							let item = {};

							item.value = this.cart[i][a].value;

							list.push(item.value)
						}

					}
				}


			}



			uni.request({
				url: this.url+'DeleteCartList',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				dataType: 'json',
				data: {
					userSid: this.userEntity.sid,
					"list": list,
				},
				success: (res) => {

					if (res.statusCode == 200) {
						uni.showToast({
							title: "购物车清空成功"
						});

						setTimeout(function() {

							location.reload()


						}, 1000);

					}

				},

				complete: (res) => {

				}
			});




		},
		methods: {
			Init() {
				this.cart = []

				uni.request({
					url: this.url+'AppCart',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid
					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {

								this.cart.push(res.data[i])
							}

						}

					},

					complete: (res) => {

					}
				});

			},
			Submit() {

				var cartJson = {
					"userSid": this.userEntity.sid,
					"reason": this.desc,
					"list": [],
				};
				for (let i = 0; i < this.cart.length; i++) {
					if (this.cart[i].length > 0) {
						for (let a = 0; a < this.cart[i].length; a++) {

							if (this.cart[i][a].checked) {
								let item = {};

								item.cabinetSid = this.cart[i][a].cabinetId;
								item.productSid = this.cart[i][a].product.productId;
								item.quantity = this.cart[i][a].product.number;
								cartJson.list.push(item)
							}

						}
					}


				}




				uni.request({
					url: this.url+'AppInsertOrder',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						json: JSON.stringify(cartJson)
					},
					success: (res) => {

						if (res.data >0) {
							uni.showToast({
								title: "提交成功"
							});

							setTimeout(function() {


								uni.switchTab({
									url: '/pages/cupboard/order',
									success() {
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return;
										location.reload()
									}
								});


							}, 1000);

						} else {
							uni.showToast({
								title: "部分商品库存不足，请重新申请",
								icon:'none'
							});
						}

					},

					complete: (res) => {

					}
				});



			},
			// 当前组下数据的全选和反选
			checkBox(e, item) {

				let that = this;

				let box = true;
				if (item.checked != undefined) {
					box = (item.checked = !item.checked);
				}
				if (item.checked == undefined) {
					box = false
				}

				item.checked = box;

				for (let a = 0; a < item.length; a++) {
					item[a].checked = box;
				}


			},
			//整个购物车单条数据的选中和取消选中
			checkboxChange: function(e) {



				var items = this.cart,
					values = e.detail.value;


				for (let b = 0; b < this.cart.length; b++) {
					for (let c = 0; c < this.cart[b].length; c++) {
						let continueArr = values.filter(item => {
							return item == this.cart[b][c].value;
						})
						if (continueArr.length > 0) {
							this.cart[b][c].checked = true;
						} else {
							this.cart[b][c].checked = false;
						}
					


					}
				}
				


			}
		}
	}
</script>

<style>
	.check-left {
		width: 20%;
	}

	.text-content {
		width: 50%;
	}

	.buttom {
		position: fixed;
		bottom: 55px;
		width: 100%;

	}

	.flex-item {
		width: 33.3%;

		text-align: center;

	}

	.flex-15 {
		width: 15%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.row-Color {
		background-color: white;

	}

	.item-border {
		/* border: 1px solid #f7f1f1; */
		margin: 10px 0;
	}

	.VerticalBox {

		display: flex;

	}

	.example-body {
		display: flex;
		justify-content: flex-start;
		/* margin-top: 5px; */
		width: 25%;
		height: auto;
		line-height: 0;

	}

	.text-overflow {
		display: block;
		width: 90%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.uni-numbox {
		width: auto;
	}

	/deep/ .example-body .uni-numbox__minus,
	.uni-numbox--text {
		font-size: 16px;
		width: 26px;
		height: 26px;
	}

	/deep/ .example-body .uni-numbox__value {
		font-size: 12px;
		width: 26px;
		height: 26px;
	}

	/deep/ .example-body .uni-numbox__plus {
		width: 26px;
		height: 26px
	}

	/deep/ .uni-checkbox-wrapper .uni-checkbox-input,
	.uni-checkbox-input-checked {
		width: 14px !important;
		height: 14px !important;
	}

	/deep/ uni-page-body,
	uni-page-body {
		line-height: 0 !important;
	}
</style>
